<template>
  <el-form-item :label="props.teacherlabel" prop="teacherId">
    <el-select
      v-model="teacherId"
      :key="props.schoolCampusId"
      placeholder="请选择教师"
      :teacherlabel="teacherlabel"
      :selectValue="selectValue"
      @change="handleChange"
      :multiple="multiple"
      clearable
    >
      <el-option v-for="teacher in teachers" :key="teacher.teacherId" :label="teacher.teacherName" :value="teacher.teacherId"></el-option>
    </el-select>
  </el-form-item>
</template>

<script setup>

import { getTeachers } from "@/api/school/teacher";


const schoolCampusId = ref("");
const emit = defineEmits(['schoolTeachers']);
const teachers = ref([]);
const selectValue = ref([]);
const teacherId = ref(props.selectValue || null)
const props = defineProps({
  selectValue: {
    type: [String, Object, Array, Number],
    default: undefined,
  },
  schoolCampusId: {
    type:  [String, Object, Array,Number],
    default: undefined,
  },
  teacherlabel: {
    type: String,
    default: '教师',
  },
  multiple: {
    type: Boolean,
    default: false
  }

});


watch(() => props.selectValue, val => {

  setTimeout(() => {
       let v = props.selectValue == "" ? null : props.selectValue;
  console.log("watch selectValue",v);
  teacherId.value = v
  // schoolCampusId.value = v;
    }, 100);



}, { deep: true, immediate: true });


watch(() => props.schoolCampusId, val => {
   //console.log("watch schoolCampusId",val);
  teachers.value = null;
    teacherId.value = "";
    //console.log("watch 监听到校区变化",val);
  getTeachersbyCampus()
}, { deep: true, immediate: true });




function getTeachersbyCampus() {
  if (props.schoolCampusId != null) {
//console.log("getTeachersbyCampus",props.schoolCampusId)

    getTeachers(props.schoolCampusId).then(response => {
      //console.log(response.data);
      teachers.value = response.data;
    });

  }
}

function handleChange(data) {
  //console.log("handleChange",data);
  emit("schoolTeachers", data == "" ? 0 : data);

}


getTeachersbyCampus();
</script>
